<template>
  <div class="score-query">
    <!-- 成绩筛选选项 -->
    <div class="filters">
      <el-select v-model="selectedTerm" placeholder="选择学期">
        <el-option label="全部学期" value=""></el-option>
        <el-option
          v-for="term in terms"
          :key="term"
          :label="term"
          :value="term"
        ></el-option>
      </el-select>

      <!-- 以搜索形式选择课程 -->
      <el-autocomplete
        v-model="selectedCourse"
        :fetch-suggestions="querySearchCourses"
        placeholder="搜索课程"
      >
        <template slot-scope="{ item }">
          {{ item }}
        </template>
      </el-autocomplete>
    </div>

    <!-- 成绩展示区域 -->
    <div class="score-display">
      <h2>学生成绩</h2>
      <el-table :data="filteredScores" stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column prop="studentName" label="姓名"></el-table-column>
        <el-table-column prop="studentId" label="学号"></el-table-column>
        <el-table-column prop="semesterName" label="开课学期"></el-table-column>
        <el-table-column prop="courseName" label="课程名称"></el-table-column>
        <el-table-column prop="score" label="成绩"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  created() {
    
  },
  data() {
    return {
      selectedTerm: "", // 选中的学期
      selectedCourse: "", // 选中的课程
      terms: [], // 学期选项
      courses: [], // 课程选项
      studentScores: [],
    };
  },
  computed: {
    ...mapState([
      // 映射 this.user 为 store.state.user
      "user",
    ]),
    filteredScores() {
      // 根据选中的学期和课程筛选成绩数据
      return this.studentScores.filter((score) => {
        return (
          (!this.selectedTerm || score.semesterName === this.selectedTerm) &&
          (!this.selectedCourse ||
            score.courseName.includes(this.selectedCourse))
        );
      });
    },
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        if (newVal.parentChildId) {
          this.fullscreenLoading = true; // 显示 loading 状态
          this.$http
            .get(`/grades/student/${newVal.parentChildId}`)
            .then((res) => {
              this.studentScores = res.data;
              // 获取所有学期并去重
              const uniqueTerms = [
                ...new Set(res.data.map((score) => score.semesterName)),
              ];
              this.terms = uniqueTerms;
              this.fullscreenLoading = false; // 取消 loading 状态
            })
            .catch((error) => {
              console.error("get student's grades error");
              this.fullscreenLoading = false; // 取消 loading 状态
            });
        } else if (newVal.parentState===false) {
          this.$alert("您还没有进行身份信息登记，请认证后使用！", "提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$store.commit("changeActiveTab", "parent-registration");
              this.$router.push("/contact-info");
            },
          });
        }
      },
      immediate: true, // 立即执行一次
    },
  },

  methods: {
    // 模拟异步搜索课程
    querySearchCourses(queryString, cb) {
      const results = this.courses.filter((course) =>
        course.includes(queryString)
      );
      cb(results);
    },
  },
};
</script>

<style scoped>
.score-query {
  padding: 20px;
}

.filters {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.score-display {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
}
</style>
  